<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绩效查询</title>
  <link rel="stylesheet" href="/frontSrc/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body>

<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">考核年度</label>
                    <div class="layui-input-inline">
                        <input type="text" name="annual" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">考核季度</label>
                    <div class="layui-input-inline">
                        <input type="text" name="quarter" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
                            class="layui-icon">  </i> 搜 索</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>

<table id="demo" lay-filter="test"></table>

<script src="/frontSrc/bs/js/jquery.min.js"></script>
<script src="/frontSrc/layui/layui.js" charset="utf-8"></script>

<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use(['table','element','upload'], function(){
        var table = layui.table;
            $=layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        // 为表格填充数据
        table.render({
            elem: '#demo',
            height: 550,
            // url: '/json/table.json',
            url: 'http://localhost:8080/api/performance/performanceList',
            cols: [[ //表头
                 {type: 'checkbox', fixed: 'left'}
                ,{field:'number', width:150, title: '编号', sort: true}
                ,{field:'cycle', width:150, title: '考核周期'}
                ,{field:'state', width:150, title: '状态'}
                ,{field:'createTime', width:150, title: '创建时间'}
            ]],
            page: true, //开启分页
            // toolbar:true,
            // page:{limit:1//每页显示1条
            //     ,limits:[1,2,3] //可选每页条数
            //     ,first: '首页' //首页显示文字，默认显示页号
            //     ,last: '尾页'
            //     ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
            //     ,next: '<i class="layui-icon layui-icon-next"></i>'
            //     ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            // },

        })

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });

            //执行搜索重载
            table.reload('demo', {
                //url: "/studentsPageData",
                page: {
                    curr: 1
                }
                , where: {
                    //searchParams: result
                    "annual": data.field.annual,
                    "quarter": data.field.quarter
                }
            }, true);

            return false;  // 如果 改为 true   ，表格会 再查询一次 ,所以 这里写为 false
        });
    })


</script>
</body>
</html>